<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in" ref="dialogBox">
      <div class="cornerComment-in-title">
        <span>{{studentName}}-全区角水平</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <div class="collapse-box" v-if="cornerPoint.length">
          <div class="list-line-box-body">
            <div class="list-line-box" v-for="(item, index) in cornerPoint" :key="item.id">
              <div class="list-line-box-title">{{item.corner.name}}</div>
              <div class="point-list">
                <p>总预约次数：<i>{{item.apply_number || 0}}</i></p>
                <p>总签到次数：<i>{{item.sign_number || 0}}</i></p>
                <p>总采集次数：<i>{{item.comment_number || 0}}</i></p>
                <p>总评价次数：<i>{{item.score_number || 0}}</i></p>
              </div>
              <div class="collapse-list" v-for="(list_item, list_index) in item.list" :key="list_item.items_id">
                <div class="collapse-list-title">
                  {{ list_index + 1 }}.{{ list_item.name }}
                </div>
                <div class="progress-container">
                  <div class="progress-bar" :style="{ borderRadius: '5px' }">
                    <div
                      class="progress-node"
                      v-for="(node, node_index) in list_item.evaluate_list"
                      :key="node_index"
                      :style="{
                        width: (100 / list_item.evaluate_list.length) + '%',
                        backgroundColor: getNodeColor(node_index, list_item, node),
                        position: 'relative',
                      }"
                    >
                      <div class="average-marker" v-if="list_item.average_evaluate == node.name"></div>
                      <div v-if="node.name === list_item.evaluate" class="glow">{{ node.name }}</div>
                    </div>
                  </div>
                </div>
                {{ list_item.max_evaluate }}
              </div>
            </div>
          </div>
        </div>
        <div style="padding: 10px;background: #fff;text-align: center;color: #999" class="collapse-box" v-else>
          未找到相关数据
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click="closePOpup" size="small">返回</el-button>
        <downexcel type="cornerStudentPoint" :option="{name: this.studentName}" :excelName="this.studentName"></downexcel>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  props: ['visible', 'studentName', 'studentId'],
  components: {},
  data() {
    return {
      dialogVisible: false,
      activeNames: [],
      cornerPoint: []
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        this.InitFn()
      } else {
        this.cornerPoint = []
      }
    }
  },
  created() {},
   methods: {
    async InitFn() {
      let option = {
        student_id: this.studentId,
        p: 0
      }
      let data = await this.$fetch(this.api.corner.nowComment, option);
      console.log('数据：', data)
      for (let item of data.list.data) {
        if (item.list) {
          item.list = this.getList(item.list)
        }
        this.activeNames.push(item.id.toString())
      }
      this.cornerPoint = data.list.data
    },
    getList(option) {
      return JSON.parse(option)
    },
     getNodeColor(index, list_item, node) {
     // 确保 list_item.evaluate 存在并且是有效的字符串
     if (!list_item.evaluate || typeof list_item.evaluate !== 'string') {
       console.error('list_item.evaluate is not a valid string:', list_item.evaluate);
       return '#ccc'; // 灰色
     }

     // 找到 evaluate 节点的索引
     const evaluateIndex = list_item.evaluate_list.findIndex(n => n.name === list_item.evaluate);

     // 检查 evaluateIndex 是否有效
     if (evaluateIndex === -1) {
       console.error('evaluateIndex is -1, evaluate not found in evaluate_list:', list_item.evaluate_list);
       return '#ccc'; // 灰色
     }

     // 如果当前节点及其之前的节点索引小于或等于 evaluateIndex，则颜色为绿色
     if (index <= evaluateIndex) {
       console.log('绿色');
       return '#006dcd'; // 绿色
     } else {
       console.log('灰色');
       return '#ccc'; // 灰色
     }
   },
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
  },

  mounted() {}
}
</script>

<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 50px;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 95%;
  /*max-width: 900px;*/
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
  background: #f8f8f8;
}

.close-Btn-line {
  cursor: pointer;
}

.hearder-search {
  display: flex;
  align-items: center;
}

.collapse-list {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 10px;
}

.collapse-list-title {
  flex: 1;
  text-align: left;
  padding-right: 15px;
}

.collapse-list-point {
  color: #1b8de5;
  font-weight: bold;
}

.collapse-list:hover {
  text-decoration: underline;
  color: #1b8de5;
  background: #eee;
}
.list-line-box-body{
  width: max-content;
}
.collapse-box{
  overflow-x: auto;
  width: 100%;
}
.list-line-box{
  background: #fff;
  border: 1px solid #cacaca;
  border-radius: 3px;
  margin-right: 5px;
  float: left;
}
.list-line-box:last-child{
  margin-right: 0;
}
.list-line-box-title{
  background: #1b8de5;
  padding: 5px 0;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
}
.point-list {
  overflow: hidden;
}

.point-list p {
  width: 50%;
  float: left;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  padding: 5px 0;
}
.point-list p:nth-child(2n) {
  border-left: 1px solid #eee;
}
.point-list p:hover {
  text-decoration: underline;
}
.point-list p i {
  font-style: normal;
  font-weight: bold;
  color: #006dcd;
  font-size: 16px;
}
.progress-container {
  width: 60%;
  background-color: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  display: flex;
  height: 30px;
  background-color: #ccc;
  position: relative;
}

.progress-node {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  transition: width 0.3s ease;
  position: relative;
  z-index: 1;
}

.glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.average-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: #4caf50;
  z-index: 2;
}

.level-label {
  margin-top: 5px;
  text-align: center;
  font-size: 14px;
  color: #333;
}
</style>
